<template>
	<master title="字段设计器">
		<div>
			<div class="types">
				<div class="type" style="font-weight: bold;">选择字段类型</div>
				<div :class="{ type:true,active:_type.value == active }" @click="change(_type.value)" v-for="_type in types">{{_type.name}}</div>
			</div>
			<div style="flex:1">
				<div style="padding-top: 16px;padding-left: 16px;">
					<span class="button primary mini editBtn" @click="getCode">生成代码</span>
					<span class="button danger mini editBtn" @click="getSql">生成SQL</span>
				</div>
				<formdesign ref="design"></formdesign>
			</div>
		</div>
	</master>
</template>
<script type="text/javascript">
	(function (G) {
		G.vue({
			"usingComponents": {
				"master": "/components/Master/Master",
				"formdesign": "/components/Form/Design/Design"
			}
		}, {
			data: {
				active:'input',
				types: [],
				code:'',
				codes:{}
			},
			mounted: function (options) {
				let types = this.selectComponent('#design').typeNames
				for(let key in types) this.types.push({
					value:key,
					name:types[key]
				})
				this.change('input')
			},
			methods: {
				change(type) {
					this.active = type
					let code = this.codes[type]
					this.selectComponent('#design').build(type,code ? code.data : {})
				},
				getSql(){
					let sql = this.selectComponent('#design').getSql()
					G.alert(sql || '生成SQL失败')
				},
				getCode(){
					let code = this.selectComponent('#design').getCode()
					if(code) this.codes[this.active] = code
					G.alert(code.values)
				}
			}
		})
	})(Y)

</script>
<style scoped>
	.types {
		display: flex;
		border-bottom: 1px solid #e3a019;
	}
	.type{
		cursor: pointer;
		padding:16px 16px;
		text-align: center;
		border-right: 1px solid #f1f1f1;
	}
	.active{
		color: #fff;
		background: #e3a019;
	}
</style>